<template>
  <div class="wrap">
    <el-tabs v-model="form.type" class="tabs" @tab-click="tabChange">
      <el-tab-pane v-for="item in typeList" :key="item.value" :label="item.name" :name="item.value"></el-tab-pane>
    </el-tabs>
    <div class="list" :class="{ 'flex-between': form.type === 1, 'flex-wrap': form.type === 1 }">
      <template v-if="form.type === 1">
        <div v-for="item in contentList" :key="item.id" class="content-item pointer" @click="checkHandleClick(item)">
          <div class="item-img flex">
            <img :src="item.img">
            <p class="to-detail flex-center flex-align-items-center" @click.stop="toDetail(item, 'creativeContent')">
              <i class="iconfont icon-guankan"></i>
            </p>
            <p class="item-img-bottom font-12">{{ item.value }}互动率</p>
            <p class="item-img-desc font-14 flex-center flex-align-items-center">插入</p>
          </div>
          <div class="item-main">
            <p class="item-name font-12 ellipsis-1">{{ item.name }}</p>
            <div class="flex-between flex-align-items-center">
              <p class="item-count flex flex-align-items-center font-12">
                <i class="iconfont icon-bofang1"></i>
                {{ numConvert(item.value, 2) }}
              </p>
              <p class="item-time font-12">{{ item.time }}</p>
            </div>
          </div>
        </div>
      </template>
      <template v-if="form.type === 2">
        <div v-for="item in scriptList" :key="item.id" class="script-item flex-between">
          <div class="item-left">
            <p class="item-name ellipsis-1 font-16">脚本名称：{{ item.name }}</p>
            <p class="item-desc flex">
              <span class="font-12">脚本娱乐：{{ item.name }}</span>
            </p>
            <p class="item-desc flex">
              <span class="font-12">更新于{{ item.time }}</span>
            </p>
          </div>
          <div class="item-right flex-between flex-column">
            <p class="to-detail font-12 pointer flex flex-align-items-center" @click="toDetail(item, 'creativeScript')">
              详情<i class="iconfont icon-a-jiantou-you"></i>
            </p>
            <div class="item-btns flex">
              <p class="item-btn font-14 pointer" @click="checkHandleClick(item)">插入</p>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="pagination flex flex-align-items-center">
      <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
    </div>
  </div>

  <creative-content-detail v-if="detailInfo.creativeContent" :id="detailInfo.id"
    @close="detailInfo.creativeContent = false"></creative-content-detail>

  <creative-script-detail v-if="detailInfo.creativeScript" :id="detailInfo.id"
    @close="detailInfo.creativeScript = false"></creative-script-detail>
</template> 
<script setup>
import { defineEmits, ref } from 'vue';
import numConvert from '@/js/numConvert.js';
import CreativeContentDetail from '../../creativeContent/components/detail.vue';
import CreativeScriptDetail from '../../creativeScript/components/detail.vue';

const emit = defineEmits(['change']);

const typeList = [
  {
    name: '创意内容',
    value: 1
  },
  {
    name: '创意脚本',
    value: 2
  }
];

const form = ref({
  type: 1,
  total: 100
});
const contentList = ref([
  {
    name: '第一阶段，首次邀约【有预算】',
    value: 111,
    time: '2023-12-16',
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    id: 1
  }
]);
const scriptList = ref([
  {
    name: '第一阶段，首次邀约【有预算】',
    time: '2023-12-16',
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    id: 1
  }
]);
const detailInfo = ref({
  creativeContent: false,
  creativeScript: false
});

const tabChange = () => {
}
const toDetail = (e, field) => {
  detailInfo.value.id = e.id;
  detailInfo.value[field] = true;
}
const checkHandleClick = e => {
  emit('change', e);
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding: 0 24px;
  position: relative;

  .tabs {
    margin-bottom: 24px;

    &::v-deep {
      .el-tabs__item {
        font-size: 12px !important;

        &.is-active {
          color: @main-color !important;
        }

        &:not(.is-active):hover {
          color: @main-color !important;
        }
      }

      .el-tabs__active-bar {
        background: @main-color !important;
      }
    }
  }

  .list {
    height: calc(100% - 135px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    .content-item {
      width: 190px;
      height: 189px;
      margin-bottom: 18px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .04);
      overflow: hidden;

      .item-img {
        height: 115px;
        position: relative;

        &:hover {
          .item-img-desc {
            display: flex;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        .to-detail {
          width: 20px;
          height: 20px;
          background: #fff;
          border-radius: 50%;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1);
          position: absolute;
          top: 8px;
          right: 8px;
          z-index: 20;

          &:hover {
            color: @main-color;
          }

          i {
            font-size: 12px;
            color: #bbb;
          }
        }

        .item-img-bottom {
          color: #fff;
          position: absolute;
          top: 90px;
          right: 8px;
          z-index: 20;
          pointer-events: none;
        }

        .item-img-desc {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.2);
          color: #fff;
          display: none;
        }
      }

      .item-main {
        height: 74px;
        padding: 12px 10px 0;

        .item-name {
          color: #333;
          margin-bottom: 12px;
        }

        .item-count,
        .item-time {
          color: rgba(51, 51, 51, .65);

          i {
            color: rgba(51, 51, 51, .65);
          }
        }
      }
    }

    .script-item {
      padding: 16px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
      border-radius: 2px;
      margin-bottom: 16px;

      .item-left {
        width: 300px;

        .item-name {
          color: rgba(0, 0, 0, .65);
          margin-bottom: 24px;
        }

        .item-desc {
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          span {
            color: hsla(0, 0%, 46%, .85);
          }
        }
      }

      .item-right {
        .to-detail {
          justify-content: end;
          color: #666;

          i {
            color: #666;
            margin-left: 5px;
            font-size: 12px;
          }
        }

        .item-btns {
          justify-content: end;

          .item-btn {
            width: 62px;
            height: 32px;
            text-align: center;
            border-radius: 2px;
            background: rgba(255, 82, 119, .051) !important;
            line-height: 30px;
            border: 1px solid @main-color;
            color: @main-color;
          }
        }
      }
    }
  }

  .pagination {
    position: absolute;
    left: 0;
    bottom: -88px;
    width: 100%;
    height: 64px;
    justify-content: end;
    padding-right: 24px;
  }
}
</style>